<template>
  <view class="bg-white">
    <wd-tabs v-model="selectGroupIndex">
      <block v-for="(item, index) in groupTabData" :key="item.id">
        <wd-tab :title="item.name">
          <view class="m-20rpx">
            <wd-segmented
              size="middle"
              :options="infoViewList"
              v-model:value="currentInfoView"
              @change="currentInfoViewChange"
            ></wd-segmented>
            <!-- <view class="info-list mt-20rpx">
              <wd-tag type="primary" round class="mr-20rpx">比赛日期 2024/12/24 星期三</wd-tag>
              <wd-tag type="primary" round class="mr-20rpx">比赛状态 全部</wd-tag>
              <wd-tag type="primary" round class="mr-20rpx">比赛轮次 第一轮</wd-tag>
            </view> -->
          </view>
        </wd-tab>
      </block>
      <view class="info-view bg-#F5F5F5 p-20rpx">
        <MatchList
          v-if="currentInfoView === '赛程'"
          :groupInfo="selectGroupInfo"
          :players="players"
          :stageInfo="stageInfo"
        ></MatchList>
        <MatchTable
          v-else-if="currentInfoView === '对阵图'"
          :groupInfo="selectGroupInfo"
          :players="players"
        ></MatchTable>
        <playerList
          v-else-if="currentInfoView === '选手信息'"
          :viewInfo="currentInfoView"
        ></playerList>
      </view>
    </wd-tabs>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import MatchList from './matchList.vue'
import MatchTable from './matchTable.vue'
import playerList from './playerList.vue'
import { Stage } from '@/championship'
import { StageTypeEnum } from '@/common/enum'

const props = defineProps<{
  stageInfo: Stage
}>()
const selectGroupIndex = ref(0)
const groupTabData = ref(props.stageInfo.groups)
const players = ref(props.stageInfo.players)
const selectGroupInfo = computed(() => {
  // console.log(77777, props.stageInfo.groups[selectGroupIndex.value])
  // console.log(333, 444, selectGroupIndex.value)
  return props.stageInfo.groups[selectGroupIndex.value]
})
// const infoViewList = ref(['赛程', '选手信息', '对阵图'])
const infoViewList = ref([
  { value: '赛程', key: 0 },
  // { value: '选手信息', key: 1 },
  { value: '对阵图', key: 2 },
])
const currentInfoView = ref(infoViewList.value[0].value)
const currentInfoViewChange = (newValue) => {
  currentInfoView.value = newValue.value
}
// const groupChange = (newValue) => {
//   selectGroupInfo.value = props.stageInfo.groups[newValue.index]
// }
</script>
